echarts.registerMap('world', geoJson);
var stockData = {}
var stockDataMap = {}
var georoam = {}
var Ajax = {
    get: function (url, callback) {
        // XMLHttpRequest对象用于在后台与服务器交换数据
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, false);
        xhr.onreadystatechange = function () {
            // readyState == 4说明请求已完成
            if (xhr.readyState == 4) {
                if (xhr.status == 200 || xhr.status == 304) {
                    callback(xhr.responseText);
                }
            }
        }
        xhr.send();
    },

    // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
    post: function (url, data, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, false);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200 || xhr.status == 304) {
                    // console.log(xhr.responseText);
                    callback(xhr.responseText);
                }
            }
        }
        xhr.send(data);
    }
}
//参与地图国家中的股票code，多个根据涨跌幅相加
var stockLinkParent = {
    "Sri Lanka": ["CSEALL"],
    "China": ["000001"],
    "Indonesia": ["JKSE"],
    "Thailand": ["SET"],
    "India": ["SENSEX"],
    "Philippines": ["SENSEX"],
    "Singapore": ["STI"],
    "Pakistan": ["KSE100"],
    "Vietnam": ["VNINDEX"],
    "Korea": ["KS11", "KOSPI200"],
    "Malaysia": ["KLSE"],
    "Japan": ["N225"],
    "United States": ["DJIA"],
    "Brazil": ["BVSP"],
    "Canada": ["TSX"],
    "Mexico": ["MXX"],
    "Spain": ["IBEX"],
    "Ireland": ["ISEQ"],
    "Russia": ["RTS"],
    "Italy": ["MIB"],
    "Czech Rep.": ["PX"],
    "United Kingdom": ["FTSE","MCX"],
    "Austria": ["ATX"],
    "Greece": ["ASE"],
    "Poland": ["WIG"],
    "Belgium": ["BFX"],
    "Iceland": ["ICEXI"],
    "France": ["FCHI"],
    "Portugal": ["PSI20"],
    "Finland": ["HEX"],
    "Netherlands": ["AEX"],
    "Sweden": ["OMXSPI"],
    "Germany": ["GDAXI"],
    "Australia": ["AS51", "AORD"],
    "New Zealand": ["NZ50"]
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart'));
myChart.showLoading();
myChart.on('rendered', function () {
    myChart.hideLoading();
});
var data_tmp = [{
    name: 'China',
    value: 0
},
    {
        name: 'Japan',
        value: 0
    },
    {
        name: 'Korea',
        value: 0
    },
    {
        name: 'India',
        value: 0
    },
    {
        name: 'Malaysia',
        value: 0
    },
    {
        name: 'Singapore',
        value: 0
    },
    {
        name: 'Philippines',
        value: 0
    },
    {
        name: 'Vietnam',
        value: 0
    },
    {
        name: 'Thailand',
        value: 0
    },
    {
        name: 'Pakistan',
        value: 0
    },
    {
        name: 'Indonesia',
        value: 0
    },
    {
        name: 'Sri Lanka',
        value: 0
    },

    {
        name: '中国',
        value: 0
    },
    {
        name: '台湾',
        value: 0
    },
    {
        name: '澳门',
        value: 0
    },
    {
        name: '香港',
        value: 0
    },
    {
        name: '日本',
        value: 0
    },
    {
        name: '韩国',
        value: 0
    },
    {
        name: '印度',
        value: 0
    },
    {
        name: '新加坡',
        value: 0
    },
    {
        name: '马来西亚',
        value: 0
    },
    {
        name: '菲律宾',
        value: 0
    },
    {
        name: '越南',
        value: 0
    },
    {
        name: '泰国',
        value: 0
    },
    {
        name: '巴基斯坦',
        value: 0
    },
    {
        name: '印度尼西亚',
        value: 0
    },
    {
        name: '斯里兰卡',
        value: 0
    },


    {
        name: 'United Kingdom',
        value: 0
    },
    {
        name: 'France',
        value: 0
    },
    {
        name: 'Germany',
        value: 0
    },
    {
        name: 'Russia',
        value: 0
    },
    {
        name: 'Spain',
        value: 0
    },
    {
        name: 'Portugal',
        value: 0
    },
    {
        name: 'Belgium',
        value: 0
    },
    {
        name: 'Netherlands',
        value: 0
    },
    {
        name: 'Poland',
        value: 0
    },
    {
        name: 'Sweden',
        value: 0
    },
    {
        name: 'Switzerland',
        value: 0
    },
    {
        name: 'Italy',
        value: 0
    },
    {
        name: 'Iceland',
        value: 0
    },

    {
        name: '英国',
        value: 0
    },
    {
        name: '法国',
        value: 0
    },
    {
        name: '德国',
        value: 0
    },
    {
        name: '俄罗斯',
        value: 0
    },
    {
        name: '西班牙',
        value: 0
    },
    {
        name: '葡萄牙',
        value: 0
    },
    {
        name: '比利时',
        value: 0
    },
    {
        name: '荷兰',
        value: 0
    },
    {
        name: '波兰',
        value: 0
    },
    {
        name: '瑞典',
        value: 0
    },
    {
        name: '瑞士',
        value: 0
    },
    {
        name: '意大利',
        value: 0
    },
    {
        name: '冰岛',
        value: 0
    },

    {
        name: '美国',
        value: 0
    },
    {
        name: '加拿大',
        value: 0
    },
    {
        name: '巴西',
        value: 0
    },
    {
        name: '墨西哥',
        value: 0
    },

    {
        name: 'United States',
        value: 0
    },
    {
        name: 'Canada',
        value: 0
    },
    {
        name: 'Brazil',
        value: 0
    },
    {
        name: 'Mexico',
        value: 0
    },


    {
        name: '澳大利亚',
        value: 0
    },
    {
        name: '新西兰',
        value: 0
    },

    {
        name: 'Australia',
        value: 0
    },
    {
        name: 'New Zealand',
        value: 0
    }

];
var max = 480,
    min = 9; // todo
var maxSize4Pin = 100,
    minSize4Pin = 20;

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
            });
        }
    }
    return res;
};
var option = {
    backgroundColor: "#ffffff",
    title: {
        top: 10,
        text: '',
        subtext: '全球股市',
        x: 'center'
    },
    tooltip: {
        show: true,
        enterable: true,
        position: function (point, params, dom, rect, size) {
            // 固定在顶部
            //console.log("size", size)
            var x = point[0];
            var y = point[1];
            if (x >= (size.viewSize[0] / 2)) {
                x = x - size.contentSize[0] - 30;
                y -= 50;
            } else {
                x += 30;
                y -= 50;
            }
            if (y + size.contentSize[1] >= size.viewSize[1]) {
                //console.log("超过高度",y + size.contentSize[1] - size.viewSize[1] )
                var h = y + size.contentSize[1] - size.viewSize[1];
                if (h > 0) {
                    y = y - (y + size.contentSize[1] - size.viewSize[1]) - 20;
                }
            }
            //console.log(x, y)
            return [x, y];
        },
        extraCssText: "border-width: 0;padding:0;margin:0",
        formatter: function (params) {
            //console.log("params", params, params.data)
            if (params.data && params.data.sd) {
                var html = `<div style="width: 300px;padding: 10px;">`;
                var pcss = "flex:1;font-weight: bold;"
                html += `<div style="display: flex;">
                            <div style="${pcss}">名称</div><div style="${pcss}">最新价</div><div style="${pcss}">涨跌额</div><div style="${pcss}">涨跌幅</div><div style="${pcss}">时间</div>
                        </div>`
                params.data.sd.forEach((item, index) => {
                    let css =
                        `flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 12px;line-height: 24px;`;
                    if (item["f3"] >= 0) {
                        css += "color: red;";
                    } else {
                        css += "color: green;";
                    }
                    let trading = "<span style='color: #cccccc;margin-right: 3px;'>●</span>";
                    //console.log("item", item)
                    if (item["f107"] !== 5 && item["f107"] !== 3) {
                        trading = `<span style='color: transparent;margin-right: 3px;
background: url(./trading.gif);background-position:center;background-size:6px 6px;
background-repeat: no-repeat;'>●</span>`;
                    }
                    let date = new Date(item["f124"] * 1000);
                    var hou = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
                    var min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
                    var sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                    date = `${hou}:${min}:${sec}`;
                    html += `<div style="display: flex;">
                            <div style="${css}">${trading}<span>${item["f14"]}</span></div>
                            <div style="${css}">${item["f2"]}</div>
                            <div style="${css}">${item["f4"]}</div>
                            <div style="${css}">${item["f3"]}%</div>
                            <div style="${css}">${date}</div>
                        </div>`
                })
                //f105 5(已收盘●) 3(盘中休息●) 否(交易中)
                //html += `<div style="font-size: 12px;padding-top: 5px;">更新时间：2021-12-12 18:32:98</div></div>`;
                return html;
            } else {
                //console.log('无', params)
                return `<div style="height: 0;width: 0"></div>`;
            }
        }
    },
    visualMap: [{
        type: "piecewise",
        show: false,
        pieces: [{
            min: 2,
            color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [{
                    offset: 0,
                    color: 'rgba(255,0,0, 1)' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'rgba(255,0,0, 1)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
        },
            {
                min: 1.5,
                max: 2,
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(255,0,0,0.9)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(255,0,0,0.9)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            {
                min: 1,
                max: 1.5,
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(255,0,0,0.7)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(255,0,0,0.7)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            {
                min: 0.5,
                max: 1,
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(255,0,0,0.5)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(255,0,0,0.5)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            {
                min: 0,
                max: 0.5,
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(255,0,0,0.3)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(255,0,0,0.3)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            {
                value: 0,
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(255,0,0,0.1)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(255,0,0,0.1)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            {
                min: -0.5,
                max: -0.000000000001,
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(0, 128, 0, 0.3)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0, 128, 0, 0.3)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            {
                min: -1,
                max: -0.5,
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(0, 128, 0, 0.5)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0, 128, 0, 0.5)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            {
                min: -1.5,
                max: -1,
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(0, 128, 0, 0.7)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0, 128, 0, 0.7)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            {
                min: -2,
                max: -1.5,
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(0, 128, 0, 0.9)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0, 128, 0, 0.9)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            {
                max: -2,
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(0, 128, 0, 1)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0, 128, 0, 1)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        ]
    }],
    geo: {
        map: 'world',
        zoom: 1.15,
        show: true,
        roam: false,
        selectedMode: false,
        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: "#eff9ff",
                borderColor: '#abb7c3', //线
                shadowColor: '#dadada', //外发光
                borderWidth: 0.05,
                shadowBlur: 6,
            },
            emphasis: {
                areaColor: "",
            }
        },
        select: {
            label: {
                show: false
            }
        }
    },
    series: [
        /* {
            type: 'scatter',
            symbolSize: 5,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'center',
                    show: true, //是否显示地名
                }
            },
            itemStyle: {
                normal: {
                    color: '#fff',
                },
            },
            coordinateSystem: 'geo',
            data: convertData(data_tmp),
        }, */
        {
            type: 'map',
            map: 'world',
            geoIndex: 0,
            selectedMode: false,
            tooltip: {
                show: true
            },
            normal: {
                show: false,
            },
            emphasis: {
                show: false,
            },
            data: data_tmp
        }
    ],
};

window.onresize = function () {
    //console.log("window resize")
    myChart.resize();
    setTimeout(() => {
        myChart.resize();
    }, 100)
};


// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

myChart.on('mouseover', function (params) {
    //console.log('mouseover', params)
    if (params.data && params.data.value != undefined) {
        myChart.dispatchAction({
            type: 'downplay'
        });
    }
});
